<template>
  <basic-container>
    <avue-crud
      ref="crud"
      :page.sync="page"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      @on-load="getList"
      @search-change="searchChange"
      @search-reset="searchReset"
    >
      <template v-slot:id="{ row }">
        <el-button
          type="text"
          @click="showDiaryDetailDialog(row.id)"
        >
          {{ row.id }}
        </el-button>
      </template>
      <template v-slot:petCode="{ row }">
        <el-button
          type="text"
          @click="showPetDialog(row.petId)"
        >
          {{ row.petCode }}
        </el-button>
      </template>
      <template v-slot:adoptUserNickname="{ row }">
        <div
          class="adoptUser"
          @click="showUserInfoDialog(row.adoptUserId)"
        >
          <img
            :src="row.adoptUserAvatar"
            class="avatar"
          />
          <el-button type="text">
            {{ row.adoptUserNickname }}
          </el-button>
        </div>
      </template>
      <template v-slot:menu="{ row }">
        <template>
          <el-button
            v-if="row.status === ADOPT_DIARY_AUDIT_STATUS.PENDING_AUDIT"
            type="text"
            @click="showAuditDialog(row.id)"
          >
            审核
          </el-button>
          <el-button
            v-if="row.status === ADOPT_DIARY_AUDIT_STATUS.FAILED"
            type="text"
            @click="showAuditDialog(row.id)"
          >
            重新审核
          </el-button>
          <el-button
            v-if="
              (row.status === ADOPT_DIARY_AUDIT_STATUS.PASSED ||
                row.status === ADOPT_DIARY_AUDIT_STATUS.READY_PASSED) &&
              ADOPT_DIARY_SHIELD_FLAG.SHIELD === row.shieldFlag
            "
            type="text"
            @click="shield(row)"
          >
            恢复
          </el-button>
          <el-button
            v-if="
              (row.status === ADOPT_DIARY_AUDIT_STATUS.PASSED ||
                row.status === ADOPT_DIARY_AUDIT_STATUS.READY_PASSED) &&
              ADOPT_DIARY_SHIELD_FLAG.NO_SHIELD === row.shieldFlag
            "
            type="text"
            @click="shield(row)"
          >
            屏蔽
          </el-button>
        </template>
      </template>
    </avue-crud>
    <petDetailPopup
      :id="petId"
      v-model="petDetailVisible"
    ></petDetailPopup>
    <userInfoDialog
      v-model="userInfoVisible"
      :user-id="userId"
    ></userInfoDialog>
    <diaryAuditDialog
      :id="diaryId"
      v-model="auditVisible"
      @onSuccess="getList"
    ></diaryAuditDialog>
    <diaryDetailDialog
      :id="diaryId"
      v-model="detailVisible"
    ></diaryDetailDialog>
  </basic-container>
</template>
<script>
import { tableOption } from '@/const/crud/pet/adoptDiary';
import crudMixins from '@/mixins/crud';
import { fetchAdoptDiaryList, adoptDiaryShield } from '@/api/core/adopt';
import userInfoDialog from '@/views/community-content/component/userInfoDialog.vue';
import petDetailPopup from '@/views/pet/base-file/components/detailPopup.vue';
import diaryAuditDialog from './components/diary/diaryAuditDialog.vue';
import diaryDetailDialog from './components/diary/diaryDetailDialog.vue';
import {
  ADOPT_DIARY_AUDIT_STATUS,
  ADOPT_DIARY_SHIELD_FLAG,
} from '@/const/type';

export default {
  components: {
    userInfoDialog,
    petDetailPopup,
    diaryAuditDialog,
    diaryDetailDialog,
  },
  mixins: [crudMixins],
  data() {
    return {
      ADOPT_DIARY_AUDIT_STATUS,
      ADOPT_DIARY_SHIELD_FLAG,
      tableOption,
      petDetailVisible: false,
      userInfoVisible: false,
      auditVisible: false,
      detailVisible: false,
      userId: '',
      petId: '',
      diaryId: '',
    };
  },
  methods: {
    getList(page, refresh) {
      if (refresh) {
        this.page.current = 1;
        this.page.currentPage = 1;
      }
      this.tableLoading = true;
      const timeObj = {};
      //创建时间
      if (this.searchForm.createTime && this.searchForm.createTime.length) {
        timeObj.startTime = this.searchForm.createTime[0];
        timeObj.endTime = this.searchForm.createTime[1];
      }
      //发布时间
      if (this.searchForm.releaseTime && this.searchForm.releaseTime.length) {
        timeObj.releaseStartTime = this.searchForm.releaseTime[0];
        timeObj.releaseEndTime = this.searchForm.releaseTime[1];
      }
      fetchAdoptDiaryList(
        Object.assign(
          {
            current: this.page.currentPage,
            size: this.page.pageSize,
          },
          this.searchForm,
          timeObj
        )
      )
        .then((response) => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },

    showPetDialog(id) {
      this.petId = id;
      this.petDetailVisible = true;
    },

    showUserInfoDialog(id) {
      if (id) {
        this.userId = id;
        this.userInfoVisible = true;
      }
    },
    // 屏蔽或者恢复
    shield(row) {
      const tip = `你确认要${
        row.shieldFlag === ADOPT_DIARY_SHIELD_FLAG.SHIELD ? '恢复' : '屏蔽'
      }该日记吗？`;
      this.$confirm(tip, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return adoptDiaryShield(
            row.id,
            row.shieldFlag === ADOPT_DIARY_SHIELD_FLAG.SHIELD
              ? ADOPT_DIARY_SHIELD_FLAG.NO_SHIELD
              : ADOPT_DIARY_SHIELD_FLAG.SHIELD
          );
        })
        .then(() => {
          this.$message.success('操作成功');
          this.getList();
        });
    },
    // 审核对话框
    showAuditDialog(id) {
      this.diaryId = id;
      this.auditVisible = true;
    },
    showDiaryDetailDialog(id) {
      this.diaryId = id;
      this.detailVisible = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.adoptUser {
  display: flex;
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 3px;
  }
}
</style>
